<template>
  <div class="contend examinationContend">
    <!-- 车型选择区 -->
    <section class="chooseCarType">
      <div class="container">
        <div class="topTitleTab">
          <span>当前位置：首页 > 模拟考试</span>
        </div>
        <div class="cartypeCon">
          <div class="left">
            <div class="typeTitle">
              <span>车型选择</span>
            </div>
            <ul class="typesBox">
              <li
                v-for="(typeItem, i) in carTypeList"
                :key="i"
                :class="
                  typeindex == i ? 'typeItem active curp' : 'typeItem curp'
                "
                @click="changeType(i, typeItem)"
              >
                {{ typeItem.name }}
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="subtitle">
              <span
                :class="titleIndex == i ? 'curp active' : 'curp'"
                v-for="(titleItem, i) in typeTitle"
                :key="i"
                @click="changeTitleType(i, titleItem)"
                >{{ titleItem.title }}</span
              >
            </div>
            <div class="itemBox">
              <div class="item" v-for="(item, i) in itemList" :key="i">
                <img :src="item.imgurl" alt="" />
                <nuxt-link
                  :to="{
                    name: item.linkurl,
                    query: {
                      sub: sub,
                      type: encodeURIComponent(item.title),
                      category: category,
                      random: item.random,
                      categorysub:categorysub,
                      difficulty:item.difficulty,
                         group: group,
                    },
                  }"
                  class="title curp"
                >
                  <span>{{ item.title }}</span>
                </nuxt-link>
                <span class="tips">{{ item.tips }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 题库推荐 -->
    <section class="questionBank">
      <div class="container">
        <div class="title">
          <span>科目一和科目四考试题库</span>
        </div>
        <div class="box">
          <div class="left">
            <div class="card">
              <div class="subtips">科目一</div>
              <div class="contend">
                <div class="title titleColor">
                  2021年小车科目一基础理论知识考试题库
                </div>
                <ul>
                  <li class="curp" v-for="(item, i) in contendListOne" :key="i">
                    <nuxt-link
                      :to="{
                        name: 'examination-questions',
                        query: {
                          sub: 1,
                           type: encodeURIComponent('章节练习'),
                          category: category,
                          chapter: item.id,
                          group: group,
                        },
                      }"
                      class="addColor"
                    >
                      第{{ i + 1 }}章：{{ item.title }}
                    </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
            <div class="card">
              <div class="subtips">科目四</div>
              <div class="contend">
                <div class="title titleColor">
                  2021年小车科目四基础理论知识考试题库
                </div>
                <ul>
                  <li
                    class="curp"
                    v-for="(item, i) in contendListFour"
                    :key="i"
                  >
                    <nuxt-link
                      :to="{
                        name: 'examination-questions',
                        query: {
                          sub: 4,
                          type: encodeURIComponent('章节练习'),
                          category: category,
                          chapter: item.id,
                          group: group,
                        },
                      }"
                      class="addColor"
                    >
                      第{{ i + 1 }}章：{{ item.title }}
                    </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 驾校推荐 -->
    <section class="school">
      <div class="container">
        <div class="title">
          <span>驾校推荐</span>
          <span class="tips">优质学校推荐，满足你的多方面需求</span>
        </div>
        <div class="schoolBox">
          <drivingSchool
            class="examinationschool"
            v-for="(item, idx) in schoolListRe.slice(0, 4)"
            :key="idx"
            :schoolData="item"
          ></drivingSchool>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { school } from "~/api/commen";
import { questionChapter } from "~/api/question";
import drivingSchool from "@/components/drivingSchool.vue";
export default {
  components: { drivingSchool },
  data() {
    return {
      sub: 1,
      category: 1,
      group:1,
      typeTitle: [
        { title: "科目一交规", sub: 1 },
        { title: "科目四安全文明驾驶", sub: 4 },
      ],
      carTypeList: [
        { name: "小车", category: 1 },
        { name: "货车", category: 2 },
        { name: "客车", category: 3 },
        { name: "摩托车", category: 4 },
        { name: "资格证", category: 5 },
      ],
      itemList: [
        {
          title: "顺序练习",
          tips: "按顺序练习做题",
          imgurl: require("~/assets/images/caytypr0.png"),
          linkurl: "examination-questions",
        },
        {
          title: "随机练习",
          tips: "按随机顺序做题",
          imgurl: require("~/assets/images/caytypr1.png"),
          linkurl: "examination-questions",
          random: 1,
        },
        {
          title: "专项练习",
          tips: "分门别类重点突破",
          imgurl: require("~/assets/images/caytypr2.png"),
          linkurl: "examination-exercises",
        },
        {
          title: "章节练习",
          tips: "按照法规章节逐步分类",
          imgurl: require("~/assets/images/caytypr3.png"),
          linkurl: "examination-chapter",
        },
        {
          title: "难点攻克",
          tips: "准确把握考试难点",
          imgurl: require("~/assets/images/caytypr4.png"),
          linkurl: "examination-questions",
          difficulty:1
        },
        {
          title: "模拟考试",
          tips: "2021新题库",
          imgurl: require("~/assets/images/caytypr5.png"),
          linkurl: "examination-practice",
        },
      ],
      contendListOne: [],
      contendListFour: [],
      typeindex: 0,
      titleIndex: 0,
      categorysub: 1,
    };
  },

  async asyncData({ app, query, params }) {
    let schoolListRe = await school({ page: 1, rows: 8, order: "recommend" });
    let contendListOne = await questionChapter({ course: 1, category: 1,group:1 });
    let contendListFour = await questionChapter({ course: 4, category: 1,group:1  });
    return {
      schoolListRe: schoolListRe.list,
      contendListOne: contendListOne,
      contendListFour: contendListFour,
    };
  },
  methods: {
    changeType(i, typeItem) {
      this.typeindex = i;
      this.titleIndex=0,
      this.category = typeItem.category;
      if (this.category == 5) {
        this.typeTitle = [
          { title: "客运资格证", categorysub: 1 },
          { title: "货运资格证", categorysub: 2 },
          { title: "危险品格证", categorysub: 3 },
          { title: "教练员格证", categorysub: 4 },
          { title: "出租车资格证", categorysub: 5 },
           { title: "网约车资格证", categorysub: 6 },
        ];
        this.group=2
        this.category=this.categorysub;
      } else {
        this.group=1
        this.typeTitle = [
          { title: "科目一交规", sub: 1 },
          { title: "科目四安全文明驾驶", sub: 4 },
        ];
      }
    },
    changeTitleType(i, titleItem) {
      this.titleIndex = i;
      if (this.category == 5) {
        this.categorysub =titleItem.categorysub;
      } else {
        this.sub = titleItem.sub;
      }
    },
  },
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/examination.scss";
.examinationschool {
  margin-bottom: 26px;
}
</style>